<template>
  <div class="guide-page" v-if="showGuide">
    <img src="../../img/OIP-C.jpg" alt="" class="img">
    <h1>欢迎使用妙手医生App</h1>
    <p>这里是一些引导信息，帮助您快速上手。</p>
    <!-- 可以添加更多的引导内容 -->
    <button @click="closeGuide" class="wo">我知道了</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showGuide: true, // 控制引导页显示的状态
    };
  },
  methods: {
    closeGuide() {
      this.showGuide = false;
      // 可以在这里添加跳转到主页的逻辑
      window.location.href = '/home'
    },
  },
  mounted() {
    // 可以在mounted钩子中根据条件决定是否显示引导页
    // 比如根据用户的登录状态或者是否是首次登录
  },
};
</script>

<style>
.guide-page {
  /* 引导页的样式 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img{
  width: 20%;
  margin-bottom: 100px;
  margin-top: -100px;
}
.wo{
  width: 60%;
  height: 100px;
  background-color: #0070FF;
  color: #fff;
  font-size: 30px;
  border: none;
  border-radius: 20px;
  margin-top: 200px;
}
</style>
